<template>
    <transition name="fade">
        <div v-if="isShow" class="ui-mask">
            <div class="alert-ui">
                <div class="alert-ui-top">
                    <h1 v-if="title" class="alert-ui-top_title">{{title}}</h1>
                    <div class="alert-ui-top-desc">
                        <p class="autd_content" v-html="content"></p>
                    </div>
                </div>
                <div class="alert-ui-footer">
                    <a href="javascript:;" class="alert-ui-footer_btn" @click="btnClick">{{btnTitle}}</a>
                </div>
            </div>
        </div>
    </transition>
</template>

<style>
</style>

<script>
    export default {
        name: "alter-ui",
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '提示'
            },
            content: {
                type: String,
                default: '由于网络原因导致预约失败你可以重新预约'
            },
            btnTitle: {
                type: String,
                default: '确定'
            }
        },
        methods: {
            btnClick(){
                this.isShow = false;
            }
        }
    }
</script>
